<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
    <div class="analysis">
      <div class="table mt20">
        <div class="top-filter flex-between mb10">
          <div
            class="strong fs16 mrSemiBold flex-center"
            style="color: #110000"
          >
            <div class="outer">
              <div class="inner"></div>
            </div>
            回收站
          </div>
        </div>

        <div class="consultation-block">
          <div class="table" v-loading="tableLoading">
            <el-table size="mini" :data="tableData" style="width: 100%">
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column prop="creator" label="作者"> </el-table-column>
              <el-table-column prop="createTime" label="创建时间">
              </el-table-column>
              <el-table-column prop="title" label="标题"> </el-table-column>
              <el-table-column prop="type" label="分类"> </el-table-column>
              <el-table-column prop="lang" label="语言"> </el-table-column>
              <el-table-column prop="status" label="审核状态" :formatter="formatStatus"> </el-table-column>
              <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                  <el-button
                    type="success"
                    size="mini"
                    v-if="userInfo.admin || userInfo.id == scope.row.creatorId"
                    @click="huifu(scope.row)"
                    >恢复</el-button
                  >
                  <el-button
                    type="danger"
                    v-if="userInfo.admin || userInfo.id == scope.row.creatorId"
                    size="mini"
                    @click="deleteData(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="currentPage"
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script>
import {
  getExpense,
  deleteExpense,
  updateExpense,
  destroySeven
} from "../../../service";
import moment from "moment";
export default {
  name: "Analysis",
  i18n: require("./i18n"),
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      priceInfo: {},
      total: 0,
      tableLoading: false,
      isVisible: false,
      dialogTitle: "",
      form: {
        title: "",
        content: ""
      },
      rules: {
        title: [{ required: true, message: '不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '不能为空', trigger: 'blur' }],
        lang: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      u: {},
      userInfo: {},
      spinning: false,
      options: ['诗歌', '散文', '小说'],
      langs: ['中文', '英文'],
    };
  },
  watch: {
    $route(to) {
      if (to.path === "/page/hsz") {
        this.refreshTable();
        // 删除超出七天的文章
        this.destroySeven()
      }
    },
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('articleWebInfo'))
    this.refreshTable();
    // 删除超出七天的文章
    this.destroySeven()
  },
  methods: {
    destroySeven() {
      destroySeven().then(res => {
        console.log(res)
      })
    },
    handleCurrentChange(index) {
      this.currentPage = index
      this.refreshTable()
    },
    formatStatus(row) {
      return row.status ? '已审核' : '未审核'
    },
    refreshTable() {
      getExpense({
        page: this.currentPage,
        pageSize: this.pageSize,
        creatorId: this.userInfo.admin ? '' : this.userInfo.id,
        isDelete: 'true'
      }).then((res) => {
        this.tableData = res.code === 200 && res.data.data ? res.data.data : [];
        this.total = res.data.total || 0
      });
    },
    updateData(row) {
      this.form = {
        ...row
      };
      this.dialogTitle = "修改";
      this.isVisible = true;
    },
    deleteData(row) {
      this.$confirm("永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteExpense(row.id).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.refreshTable();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    huifu(row) {
      updateExpense(row.id, {
        isDelete: ''
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.refreshTable();
        }
      });
    }
  },
};
</script>

<style lang="less" scoped>
.analysis {
  margin-top: 20px;
  border-radius: 10px;
  width: 100%;

  .right {
    padding: 20px;
  }

  .content {
    background: #ebebeb;
    height: 500px;
    padding: 12px;
    border-radius: 10px;
  }

  .top {
    & > div {
      width: 50%;
      padding: 20px 16px;
    }
    background: #fff;
    display: flex;
    border-radius: 10px;
  }
}

.diy-btn {
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: auto;
  border-radius: 20px;
  cursor: pointer;
}
.diy-btn-hover:hover {
  color: #fff;
  background-color: #9254de;
  border-color: #9254de;
}
.danger-btn-hover:hover {
  color: #fff;
  background-color: #ff7875;
  border-color: #ff7875;
}
.black-btn-hover:hover {
  color: #fff;
  background-color: #655c5c !important;
  border-color: #655c5c;
}
.mt50 {
  margin-top: 50px;
}

.btns {
  width: 60%;
  margin-left: 20%;
  display: flex;
  justify-content: space-around;
  & > div {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
  }
}
.card-each {
  flex: 1;
  height: 80px;
  background: #fff;
  border-radius: 2px;
  padding: 20px;
}
.table {
  background: #fff;
  padding: 20px;
}
</style>
